{% extends "button.html" %}
{% block title %}
    <title>样本测序质控信息</title>
{% endblock %}


{% block content %}
    <div class="jumbotron">
        <h1>甲基化早筛项目数据库管理系统Demo</h1>
        <h4>样本测序质控信息表</h4>
    </div>
{% endblock %}

{% block plot %}
    <div class="row">
        <div id="plot_highcharts" style="width: 550px; height: 400px; margin: 0 auto" class="col-9"></div>
        <div id="plot_button" class="form-group col-3">
            <label for="plot_highcharts_field"> 请选择用于画图的关键字段</label>
            <select class="form-control" id="plot_highcharts_field" name="plot_highcharts_field">
                <option value="data_size_gb_field" selected="selected">Data Size(Gb)</option>
                <option value="clean_rate_field">Clean Rate(%)</option>
                <option value="r1_q20">R1 Q20</option>
                <option value="r2_q20">R2 Q20</option>
                <option value="r1_q30">R1 Q30</option>
                <option value="r2_q30">R2 Q30</option>
                <option value="gc_content">GC Content</option>
                <option value="bs_conversion_rate_lambda_dna_field">BS conversion rate(lambda DNA)</option>
                <option value="bs_conversion_rate_chh_field">BS conversion rate(CHH)</option>
                <option value="bs_conversion_rate_chg_field">BS conversion rate(CHG)</option>
                <option value="uniquely_paired_mapping_rate">Uniquely Paired Mapping Rate</option>
                <option value="mismatch_and_indel_rate">Mismatch and InDel Rate</option>
                <option value="mode_fragment_length_bp_field">Mode Fragment Length(bp)</option>
                <option value="genome_duplication_rate">Genome Duplication Rate</option>
                <option value="genome_depth_x_field">Genome Depth(X)</option>
                <option value="genome_dedupped_depth_x_field">Genome Dedupped Depth(X)</option>
                <option value="genome_coverage">Genome Coverage</option>
                <option value="genome_4x_cpg_depth_x_field">Genome 4X CpG Depth(X)</option>
                <option value="genome_4x_cpg_coverage">Genome 4X CpG Coverage</option>
                <option value="genome_4x_cpg_methylation_level">Genome 4X CpG methylation level</option>
                <option value="panel_4x_cpg_depth_x_field">Panel 4X CpG Depth(X)</option>
                <option value="panel_4x_cpg_coverage">Panel 4X CpG Coverage</option>
                <option value="panel_4x_cpg_methylation_level">Panel 4X CpG methylation level</option>
                <option value="panel_ontarget_rate_region_field">Panel Ontarget Rate(region)</option>
                <option value="panel_duplication_rate_region_field">Panel Duplication Rate(region)</option>
                <option value="panel_depth_site_x_field">Panel Depth(site,X)</option>
                <option value="panel_dedupped_depth_site_x_field">Panel Dedupped Depth(site,X)</option>
                <option value="panel_coverage_site_1x_field">Panel Coverage(site,1X)</option>
                <option value="panel_coverage_site_10x_field">Panel Coverage(site,10X)</option>
                <option value="panel_coverage_site_20x_field">Panel Coverage(site,20X)</option>
                <option value="panel_coverage_site_50x_field">Panel Coverage(site,50X)</option>
                <option value="panel_coverage_site_100x_field">Panel Coverage(site,100X)</option>
                <option value="panel_uniformity_site_20_mean_field">Panel Uniformity(site,>20%mean)</option>
                <option value="strand_balance_f_field">Strand balance(F)</option>
                <option value="strand_balance_r_field">Strand balance(R)</option>
                <option value="gc_bin_depth_ratio">GC bin depth ratio</option>
            </select>
        </div>
    </div><br>
{% endblock %}

{% block table %}
    <!-- datatables -->
    <table id="table_id" class="display">
        <thead>
        <tr>
            <th>索引</th>
            <th>Sample</th>
            <th>Data_Size(Gb)</th>
            <th>Clean_Rate(%)</th>
            <th>R1_Q20</th>
            <th>R2_Q20</th>
            <th>R1_Q30</th>
            <th>R2_Q30</th>
            <th>GC_Content</th>
            <th>BS_conversion_rate(lambda_DNA)</th>
            <th>BS_conversion_rate(CHH)</th>
            <th>BS_conversion_rate(CHG)</th>
            <th>Uniquely_Paired_Mapping_Rate</th>
            <th>Mismatch_and_InDel_Rate</th>
            <th>Mode_Fragment_Length(bp)</th>
            <th>Genome_Duplication_Rate</th>
            <th>Genome_Depth(X)</th>
            <th>Genome_Dedupped_Depth(X)</th>
            <th>Genome_Coverage</th>
            <th>Genome_4X_CpG_Depth(X)</th>
            <th>Genome_4X_CpG_Coverage</th>
            <th>Genome_4X_CpG_methylation_level</th>
            <th>Panel_4X_CpG_Depth(X)</th>
            <th>Panel_4X_CpG_Coverage</th>
            <th>Panel_4X_CpG_methylation_level</th>
            <th>Panel_Ontarget_Rate(region)</th>
            <th>Panel_Duplication_Rate(region)</th>
            <th>Panel_Depth(site,X)</th>
            <th>Panel_Dedupped_Depth(site,X)</th>
            <th>Panel_Coverage(site,1X)</th>
            <th>Panel_Coverage(site,10X)</th>
            <th>Panel_Coverage(site,20X)</th>
            <th>Panel_Coverage(site,50X)</th>
            <th>Panel_Coverage(site,100X)</th>
            <th>Panel_Uniformity(site,>20%mean)</th>
            <th>Strand_balance(F)</th>
            <th>Strand_balance(R)</th>
            <th>GC_bin_depth_ratio</th>
            <th>样本编号</th>
            <th>DNA提取编号</th>
            <th>建库编号</th>
            <th>捕获文库名</th>
            <th>测序文库名</th>
            <th>上机文库号</th>
            <th>备注</th>
            <th>上次修改时间</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
    </table>
{% endblock %}

{% block ModalForm %}
    <div class="form-group">
        <span><a class="text-danger front-weight-bold">* </a>
            <label for="singleLB_Pooling_id"> 文库编号</label></span>
        <input type="text" class="form-control" id="singleLB_Pooling_id" name="singleLB_Pooling_id"
               placeholder="请输入文库编号" required="true">
    </div>
    <div class="form-group">
        <span><a class="text-danger front-weight-bold">* </a>
            <label for="sequencing_id"> 上机文库号</label></span>
        <input type="text" class="form-control" id="sequencing_id" name="sequencing_id"
               placeholder="请输入上机文库号" required="true">
    </div>
    <div class="form-group">
        <span><a class="text-danger front-weight-bold">* </a>
            <label for="QC_id"> Sample</label></span>
        <input type="text" class="form-control" id="QC_id" name="QC_id"
               placeholder="请输入Sample" required="true">
    </div>
    <div class="form-group">
        <label for="data_size_gb_field"> Data_Size(Gb)</label>
        <input type="number" step="0.01" class="form-control" id="data_size_gb_field" name="data_size_gb_field"
               placeholder="请输入Data_Size(Gb)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="clean_rate_field"> Clean_Rate(%)</label>
        <input type="number" step="0.0001" class="form-control" id="clean_rate_field" name="clean_rate_field"
               placeholder="请输入Clean_Rate(%)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="r1_q20"> R1_Q20</label>
        <input type="number" step="0.0001" class="form-control" id="r1_q20" name="r1_q20"
               placeholder="请输入R1_Q20，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="r2_q20"> R2_Q20</label>
        <input type="number" step="0.0001" class="form-control" id="r2_q20" name="r2_q20"
               placeholder="请输入R2_Q20，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="r1_q30"> R1_Q30</label>
        <input type="number" step="0.0001" class="form-control" id="r1_q30" name="r1_q30"
               placeholder="请输入R1_Q30，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="r2_q30"> R2_Q30</label>
        <input type="number" step="0.0001" class="form-control" id="r2_q30" name="r2_q30"
               placeholder="请输入R2_Q30，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="gc_content"> GC_Content</label>
        <input type="number" step="0.0001" class="form-control" id="gc_content" name="gc_content"
               placeholder="请输入GC_Content，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="bs_conversion_rate_lambda_dna_field"> BS_conversion_rate(lambda_DNA)</label>
        <input type="number" step="0.0001" class="form-control" id="bs_conversion_rate_lambda_dna_field"
               name="bs_conversion_rate_lambda_dna_field"
               placeholder="请输入BS_conversion_rate(lambda_DNA)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="bs_conversion_rate_chh_field"> BS_conversion_rate(CHH)</label>
        <input type="number" step="0.0001" class="form-control" id="bs_conversion_rate_chh_field"
               name="bs_conversion_rate_chh_field"
               placeholder="请输入BS_conversion_rate(CHH)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="bs_conversion_rate_chg_field"> BS_conversion_rate(CHG)</label>
        <input type="number" step="0.0001" class="form-control" id="bs_conversion_rate_chg_field"
               name="bs_conversion_rate_chg_field"
               placeholder="请输入BS_conversion_rate(CHG)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="uniquely_paired_mapping_rate"> Uniquely_Paired_Mapping_Rate</label>
        <input type="number" step="0.0001" class="form-control" id="uniquely_paired_mapping_rate"
               name="uniquely_paired_mapping_rate"
               placeholder="请输入Uniquely_Paired_Mapping_Rate，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="mismatch_and_indel_rate"> Mismatch_and_InDel_Rate</label>
        <input type="number" step="0.0001" class="form-control" id="mismatch_and_indel_rate"
               name="mismatch_and_indel_rate"
               placeholder="请输入Mismatch_and_InDel_Rate，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="mode_fragment_length_bp_field"> Mode_Fragment_Length(bp)</label>
        <input type="number" class="form-control" id="mode_fragment_length_bp_field"
               name="mode_fragment_length_bp_field"
               placeholder="请输入Mode_Fragment_Length(bp)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="genome_duplication_rate"> Genome_Duplication_Rate</label>
        <input type="number" step="0.0001" class="form-control" id="genome_duplication_rate"
               name="genome_duplication_rate"
               placeholder="请输入Genome_Duplication_Rate，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="genome_depth_x_field"> Genome_Depth(X)</label>
        <input type="number" step="0.01" class="form-control" id="genome_depth_x_field" name="genome_depth_x_field"
               placeholder="请输入Genome_Depth(X)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="genome_dedupped_depth_x_field"> Genome_Dedupped_Depth(X)</label>
        <input type="number" step="0.01" class="form-control" id="genome_dedupped_depth_x_field"
               name="genome_dedupped_depth_x_field"
               placeholder="请输入Genome_Dedupped_Depth(X)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="genome_coverage"> Genome_Coverage</label>
        <input type="number" step="0.0001" class="form-control" id="genome_coverage" name="genome_coverage"
               placeholder="请输入Genome_Coverage，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="genome_4x_cpg_depth_x_field"> Genome_4X_CpG_Depth(X)</label>
        <input type="number" step="0.01" class="form-control" id="genome_4x_cpg_depth_x_field"
               name="genome_4x_cpg_depth_x_field" placeholder="请输入Genome_4X_CpG_Depth(X)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="genome_4x_cpg_coverage"> Genome_4X_CpG_Coverage</label>
        <input type="number" step="0.0001" class="form-control" id="genome_4x_cpg_coverage"
               name="genome_4x_cpg_coverage" placeholder="请输入Genome_4X_CpG_Coverage，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="genome_4x_cpg_methylation_level"> Genome_4X_CpG_methylation_level</label>
        <input type="number" step="0.0001" class="form-control" id="genome_4x_cpg_methylation_level"
               name="genome_4x_cpg_methylation_level"
               placeholder="请输入Genome_4X_CpG_methylation_level，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="panel_4x_cpg_depth_x_field"> Panel_4X_CpG_Depth(X)</label>
        <input type="number" step="0.01" class="form-control" id="panel_4x_cpg_depth_x_field"
               name="panel_4x_cpg_depth_x_field" placeholder="请输入Panel_4X_CpG_Depth(X)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="panel_4x_cpg_coverage"> Panel_4X_CpG_Coverage</label>
        <input type="number" step="0.0001" class="form-control" id="panel_4x_cpg_coverage" name="panel_4x_cpg_coverage"
               placeholder="请输入Panel_4X_CpG_Coverage，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="panel_4x_cpg_methylation_level"> Panel_4X_CpG_methylation_level</label>
        <input type="number" step="0.0001" class="form-control" id="panel_4x_cpg_methylation_level"
               name="panel_4x_cpg_methylation_level" placeholder="请输入Panel_4X_CpG_methylation_level，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="panel_ontarget_rate_region_field"> Panel_Ontarget_Rate(region)</label>
        <input type="number" step="0.0001" class="form-control" id="panel_ontarget_rate_region_field"
               name="panel_ontarget_rate_region_field" placeholder="请输入Panel_Ontarget_Rate(region)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="panel_duplication_rate_region_field"> Panel_Duplication_Rate(region)</label>
        <input type="number" step="0.0001" class="form-control" id="panel_duplication_rate_region_field"
               name="panel_duplication_rate_region_field"
               placeholder="请输入Panel_Duplication_Rate(region)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="panel_depth_site_x_field"> Panel_Depth(site,X)</label>
        <input type="number" step="0.01" class="form-control" id="panel_depth_site_x_field"
               name="panel_depth_site_x_field"
               placeholder="请输入Panel_Depth(site,X)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="panel_dedupped_depth_site_x_field"> Panel_Dedupped_Depth(site,X)</label>
        <input type="number" step="0.01" class="form-control" id="panel_dedupped_depth_site_x_field"
               name="panel_dedupped_depth_site_x_field"
               placeholder="请输入Panel_Dedupped_Depth(site,X)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="panel_coverage_site_1x_field"> Panel_Coverage(site,1X)</label>
        <input type="number" step="0.0001" class="form-control" id="panel_coverage_site_1x_field"
               name="panel_coverage_site_1x_field"
               placeholder="请输入Panel_Coverage(site,1X)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="panel_coverage_site_10x_field"> Panel_Coverage(site,10X)</label>
        <input type="number" step="0.0001" class="form-control" id="panel_coverage_site_10x_field"
               name="panel_coverage_site_10x_field"
               placeholder="请输入Panel_Coverage(site,10X)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="panel_coverage_site_20x_field"> Panel_Coverage(site,20X)</label>
        <input type="number" step="0.0001" class="form-control" id="panel_coverage_site_20x_field"
               name="panel_coverage_site_20x_field"
               placeholder="请输入Panel_Coverage(site,20X)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="panel_coverage_site_50x_field"> Panel_Coverage(site,50X)</label>
        <input type="number" step="0.0001" class="form-control" id="panel_coverage_site_50x_field"
               name="panel_coverage_site_50x_field"
               placeholder="请输入Panel_Coverage(site,50X)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="panel_coverage_site_100x_field"> Panel_Coverage(site,100X)</label>
        <input type="number" step="0.0001" class="form-control" id="panel_coverage_site_100x_field"
               name="panel_coverage_site_100x_field"
               placeholder="请输入Panel_Coverage(site,100X)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="panel_uniformity_site_20_mean_field"> Panel_Uniformity(site,>20%mean)</label>
        <input type="number" step="0.0001" class="form-control" id="panel_uniformity_site_20_mean_field"
               name="panel_uniformity_site_20_mean_field"
               placeholder="请输入Panel_Uniformity(site,>20%mean)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="strand_balance_f_field"> Strand_balance(F)</label>
        <input type="number" step="0.0001" class="form-control" id="strand_balance_f_field"
               name="strand_balance_f_field"
               placeholder="请输入Strand_balance(F)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="strand_balance_r_field"> Strand_balance(R)</label>
        <input type="number" step="0.0001" class="form-control" id="strand_balance_r_field"
               name="strand_balance_r_field"
               placeholder="请输入Strand_balance(R)，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="gc_bin_depth_ratio"> GC_bin_depth_ratio</label>
        <input type="number" step="0.0001" class="form-control" id="gc_bin_depth_ratio" name="gc_bin_depth_ratio"
               placeholder="请输入GC_bin_depth_ratio，默认：0" value="0">
    </div>
    <div class="form-group">
        <label for="others"> 备注</label>
        <input type="text" class="form-control" id="others" name="others"
               placeholder="请输入备注，默认：无" value="无">
    </div>
{% endblock %}

{% block extra_js %}
    <script>
        $(document).ready(function () {
            let url = '/api/QCInfo/';
            let url1 = '/api/PoolingInfo/';
            let url2 = '/api/SequencingInfo/';
            let id = 0;
            let dataModelForm;
            let fieldForPie = $('#plot_highcharts_field');

            function MyModelInit(title_name, data) {
                dataModelForm = data;
                if (title_name === '更新') {
                    $('#QC_id').val(data['QC_id']);
                    $('#data_size_gb_field').val(data['data_size_gb_field']);
                    $('#clean_rate_field').val(data['clean_rate_field']);
                    $('#r1_q20').val(data['r1_q20']);
                    $('#r2_q20').val(data['r2_q20']);
                    $('#r1_q30').val(data['r1_q30']);
                    $('#r2_q30').val(data['r2_q30']);
                    $('#gc_content').val(data['gc_content']);
                    $('#bs_conversion_rate_lambda_dna_field').val(data['bs_conversion_rate_lambda_dna_field']);
                    $('#bs_conversion_rate_chh_field').val(data['bs_conversion_rate_chh_field']);
                    $('#bs_conversion_rate_chg_field').val(data['bs_conversion_rate_chg_field']);
                    $('#uniquely_paired_mapping_rate').val(data['uniquely_paired_mapping_rate']);
                    $('#mismatch_and_indel_rate').val(data['mismatch_and_indel_rate']);
                    $('#mode_fragment_length_bp_field').val(data['mode_fragment_length_bp_field']);
                    $('#genome_duplication_rate').val(data['genome_duplication_rate']);
                    $('#genome_depth_x_field').val(data['genome_depth_x_field']);
                    $('#genome_dedupped_depth_x_field').val(data['genome_dedupped_depth_x_field']);
                    $('#genome_coverage').val(data['genome_coverage']);
                    $('#genome_4x_cpg_depth_x_field').val(data['genome_4x_cpg_depth_x_field']);
                    $('#genome_4x_cpg_coverage').val(data['genome_4x_cpg_coverage']);
                    $('#genome_4x_cpg_methylation_level').val(data['genome_4x_cpg_methylation_level']);
                    $('#panel_4x_cpg_depth_x_field').val(data['panel_4x_cpg_depth_x_field']);
                    $('#panel_4x_cpg_coverage').val(data['panel_4x_cpg_coverage']);
                    $('#panel_4x_cpg_methylation_level').val(data['panel_4x_cpg_methylation_level']);
                    $('#panel_ontarget_rate_region_field').val(data['panel_ontarget_rate_region_field']);
                    $('#panel_duplication_rate_region_field').val(data['panel_duplication_rate_region_field']);
                    $('#panel_depth_site_x_field').val(data['panel_depth_site_x_field']);
                    $('#panel_dedupped_depth_site_x_field').val(data['panel_dedupped_depth_site_x_field']);
                    $('#panel_coverage_site_1x_field').val(data['panel_coverage_site_1x_field']);
                    $('#panel_coverage_site_10x_field').val(data['panel_coverage_site_10x_field']);
                    $('#panel_coverage_site_20x_field').val(data['panel_coverage_site_20x_field']);
                    $('#panel_coverage_site_50x_field').val(data['panel_coverage_site_50x_field']);
                    $('#panel_coverage_site_100x_field').val(data['panel_coverage_site_100x_field']);
                    $('#panel_uniformity_site_20_mean_field').val(data['panel_uniformity_site_20_mean_field']);
                    $('#strand_balance_f_field').val(data['strand_balance_f_field']);
                    $('#strand_balance_r_field').val(data['strand_balance_r_field']);
                    $('#gc_bin_depth_ratio').val(data['gc_bin_depth_ratio']);
                    $('#singleLB_Pooling_id').val(data['singleLB_Pooling_id']);
                    $('#sequencing_id').append(data['sequencing_id']);
                    $('#others').val(data['others']);
                    $('#type').val('edit');
                    $('#modal_title').text('更新');
                } else {
                    $('#QC_id').val("");
                    $('#data_size_gb_field').val("");
                    $('#clean_rate_field').val("");
                    $('#r1_q20').val("");
                    $('#r2_q20').val("");
                    $('#r1_q30').val("");
                    $('#r2_q30').val("");
                    $('#gc_content').val("");
                    $('#bs_conversion_rate_lambda_dna_field').val("");
                    $('#bs_conversion_rate_chh_field').val("");
                    $('#bs_conversion_rate_chg_field').val("");
                    $('#uniquely_paired_mapping_rate').val("");
                    $('#mismatch_and_indel_rate').val("");
                    $('#mode_fragment_length_bp_field').val("");
                    $('#genome_duplication_rate').val("");
                    $('#genome_depth_x_field').val("");
                    $('#genome_dedupped_depth_x_field').val("");
                    $('#genome_coverage').val("");
                    $('#genome_4x_cpg_depth_x_field').val("");
                    $('#genome_4x_cpg_coverage').val("");
                    $('#genome_4x_cpg_methylation_level').val("");
                    $('#panel_4x_cpg_depth_x_field').val("");
                    $('#panel_4x_cpg_coverage').val("");
                    $('#panel_4x_cpg_methylation_level').val("");
                    $('#panel_ontarget_rate_region_field').val("");
                    $('#panel_duplication_rate_region_field').val("");
                    $('#panel_depth_site_x_field').val("");
                    $('#panel_dedupped_depth_site_x_field').val("");
                    $('#panel_coverage_site_1x_field').val("");
                    $('#panel_coverage_site_10x_field').val("");
                    $('#panel_coverage_site_20x_field').val("");
                    $('#panel_coverage_site_50x_field').val("");
                    $('#panel_coverage_site_100x_field').val("");
                    $('#panel_uniformity_site_20_mean_field').val("");
                    $('#strand_balance_f_field').val("");
                    $('#strand_balance_r_field').val("");
                    $('#gc_bin_depth_ratio').val("");
                    $('#singleLB_Pooling_id').val("");
                    $('#sequencing_id').val("");
                    $('#others').val("");
                    $('#type').val('new');
                    $('#modal_title').text('新增');
                }
            }


            let table = $('#table_id').DataTable({
                "language": {
                    "lengthMenu": "选择每页 _MENU_ 展示 ",
                    "zeroRecords": "未找到匹配结果--抱歉",
                    "info": "当前显示第 _PAGE_ 页结果，共 _PAGES_ 页",
                    "infoEmpty": "没有数据",
                    "search": "搜索",
                    "infoFiltered": "(获取 _MAX_ 项结果)",
                    "paginate": {
                        "first": "首页",
                        "previous": "上一页",
                        "next": "下一页",
                        "last": "末页"
                    }
                },
                "scrollY": "5000px",
                "scrollCollapse": true,
                "scrollX": true,
                "pagingType": "full_numbers",
                fixedColumns: true,
                rowReorder: true,
                colReorder: true,
                searching: true,
                select: true,
                dom: 'lB<"clear">frtip',
                buttons: [
                    {
                        extend: 'colvisGroup',
                        text: '显示前5列',
                        show: [0, 1, 2, 3, 4, 5, 47],
                        hide: [
                            6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
                            17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
                            27, 28, 29, 30, 31, 32, 33, 34, 35, 36,
                            37, 38, 39, 40, 41, 42, 43, 44, 45, 46
                        ]
                    },
                    {
                        extend: 'colvisGroup',
                        text: '显示全部列',
                        show: ':hidden',
                    },
                    {
                        text: '指定显示列', extend: 'colvis',
                        postfixButtons: ['colvisRestore'],
                        columnText: function (dt, idx, title) {
                            return (idx + 1) + ': ' + title;
                        }
                    },
                    {
                        extend: 'selectAll',
                        text: '全选'
                    }, {
                        extend: 'selectRows',
                        text: '选择多行'
                    }, {
                        extend: 'selectNone',
                        text: '取消当前选择'
                    },
                    {
                        extend: 'copy',
                        text: '复制到剪切板',
                        exportOptions: {
                            columns: range(1, 46)
                        }
                    }, {
                        extend: 'csv',
                        text: '输出到csv',
                        exportOptions: {
                            columns: range(1, 46)
                        }
                    }
                ],
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]],
                "serverSide": true,
                "processing": true,
                "ajax": "/api/QCInfo/?format=datatables",
                "deferRender": true,
                "columns": [
                    {
                        data: 'index',
                        width: "1%",
                        // 若想前端显示的不一样，则需要"render"函数
                        'render': function (data, type, full, meta) {
                            return meta.row + 1 + meta.settings._iDisplayStart;
                        }
                    },
                    {"data": "QC_id"},
                    {"data": "data_size_gb_field"},
                    {"data": "clean_rate_field"},
                    {"data": "r1_q20"},
                    {"data": "r2_q20"},
                    {"data": "r1_q30"},
                    {"data": "r2_q30"},
                    {"data": "gc_content"},
                    {"data": "bs_conversion_rate_lambda_dna_field"},
                    {"data": "bs_conversion_rate_chh_field"},
                    {"data": "bs_conversion_rate_chg_field"},
                    {"data": "uniquely_paired_mapping_rate"},
                    {"data": "mismatch_and_indel_rate"},
                    {"data": "mode_fragment_length_bp_field"},
                    {"data": "genome_duplication_rate"},
                    {"data": "genome_depth_x_field"},
                    {"data": "genome_dedupped_depth_x_field"},
                    {"data": "genome_coverage"},
                    {"data": "genome_4x_cpg_depth_x_field"},
                    {"data": "genome_4x_cpg_coverage"},
                    {"data": "genome_4x_cpg_methylation_level"},
                    {"data": "panel_4x_cpg_depth_x_field"},
                    {"data": "panel_4x_cpg_coverage"},
                    {"data": "panel_4x_cpg_methylation_level"},
                    {"data": "panel_ontarget_rate_region_field"},
                    {"data": "panel_duplication_rate_region_field"},
                    {"data": "panel_depth_site_x_field"},
                    {"data": "panel_dedupped_depth_site_x_field"},
                    {"data": "panel_coverage_site_1x_field"},
                    {"data": "panel_coverage_site_10x_field"},
                    {"data": "panel_coverage_site_20x_field"},
                    {"data": "panel_coverage_site_50x_field"},
                    {"data": "panel_coverage_site_100x_field"},
                    {"data": "panel_uniformity_site_20_mean_field"},
                    {"data": "strand_balance_f_field"},
                    {"data": "strand_balance_r_field"},
                    {"data": "gc_bin_depth_ratio"},
                    {"data": "sample_id", "name": "sample_id__sample_id"},
                    {"data": "dna_id", "name": "dna_id__dna_id"},
                    {"data": "singleLB_id", "name": "singleLB_id__singleLB_id"},
                    {"data": "poolingLB_id", "name": "poolingLB_id__poolingLB_id"},
                    {"data": "singleLB_Pooling_id", "name": "singleLB_Pooling_id__singleLB_Pooling_id"},
                    {"data": "sequencing_id", "name": "sequencing_id__sequencing_id"},
                    {"data": "others"},
                    {"data": "last_modify_date"},
                    {"data": "created"},
                    {
                        "data": null,
                        "defaultContent": '<button type="button" class="btn btn-info">更新</button>' + '&nbsp;&nbsp' +
                            '<button type="button" class="btn btn-danger">删除</button>'
                    }
                ]
            });
            table.button(0).trigger();

            $('#table_id tbody').on('click', 'button', function () {
                let data = table.row($(this).parents('tr')).data();
                let class_name = $(this).attr('class');
                id = data['index'];
                if (class_name === 'btn btn-info') {
                    // EDIT button
                    MyModelInit('更新', data);
                    $("#myModal").modal();
                } else {
                    // DELETE button
                    //alert('delete '+id);
                    //$('#modal_title').text('DELETE');
                    $("#confirm").modal();
                }

            });

            $('#modelForm').on('submit', function (e) {
                e.preventDefault();

                // 递交前检查，一般是检测model的外键是否存在
                let data0 = $.ajax({
                    url: url1, dataType: 'json', contentType: "application/json",
                    type: "get", async: false, data: {singleLB_Pooling_id: $('#singleLB_Pooling_id').val()}
                }).responseJSON[0];
                let data1 = $.ajax({
                    url: url2, dataType: 'json', contentType: "application/json",
                    type: "get", async: false, data: {sequencing_id: $('#sequencing_id').val()}
                }).responseJSON[0];
                if (data0 === undefined) {
                    $('#myModalError').text('错误！！！文库编号不存在，请填写正确的文库编号。');
                    return
                } else if (data1 === undefined) {
                    $('#myModalError').text('错误！！！上机文库号不存在，请填写正确的上机文库号。');
                    return
                }

                let type = $('#type').val();
                let method = '';
                let url_ajax = url;
                if (type === 'new') {
                    // new
                    method = 'POST';
                    // POST前检查，一般是检测model的关键字段值是否存在
                    let data1 = $.ajax({
                        url: url, dataType: 'json', contentType: "application/json",
                        type: "get", async: false, data: {QC_id: $('#QC_id').val()}
                    }).responseJSON[0];
                    if (data1 !== undefined) {
                        $('#myModalError').text('错误！！！Sample已存在，无法添加。如需更新该条目，请在对应行进行更新操作。');
                        return
                    }
                } else {
                    // edit
                    url_ajax = url + id + '/';
                    method = 'PUT';
                }

                $.ajax({
                    url: url_ajax,
                    method: method,
                    data: $(this).serialize() + '&' + $.param({
                        sample_id: data0.sample_id,
                        dna_id: data0.dna_id,
                        singleLB_id: data0.singleLB_id,
                        poolingLB_id: data0.poolingLB_id
                    }),
                    headers: {'X-HTTP-Method-Override': 'PATCH'},
                    success: function () {
                        let v_tmp = $('#QC_id').val();
                        if (type === 'new') {
                            databaseRecordAjaxPut("ClinicalInfo", "单项添加", "样本编号：" + v_tmp);
                            $('#myModalError').text('添加成功！！！Sample：' + v_tmp);
                        } else {
                            databaseRecordAjaxPut("ClinicalInfo", "单项更新", "样本编号：" + v_tmp);
                            $('#myModalError').text('更新成功！！！Sample：' + v_tmp);
                        }

                        setTimeout(
                            function () {
                                window.location.reload(true);
                            }, 3000
                        );
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        $('#myModalError').text('出现错误！！！请联系管理员');
                        console.log(jqXHR + ';' + textStatus + ';' + errorThrown)
                    }
                });
            });


            $('#confirm').on('click', '#delete', function (e) {
                $.ajax({
                    url: url + id + '/',
                    method: 'DELETE',
                    success: function () {
                        databaseRecordAjaxPut("QCInfo", "单项删除", "index：" + id);
                        window.location.reload(true);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log(jqXHR + ';' + textStatus + ';' + errorThrown)
                    }
                });
            });


            $('#new').on('click', function (e) {
                MyModelInit('新增', {});
                $("#myModal").modal();
            });

            $('#upload').on('click', function (e) {
                $('#uploadOperator').val("");
                $('#uploadFile').val("");
                $('#uploadError').val("");
                $('#uploadUrl').val('QCInfo');
                $("#uploadModal").modal();
            });

            $('#bulkDel').on('click', function (e) {
                $('#bulkDelUrl').val('QCInfo');
                $("#bulkDelModal").modal();
            });

            $('.downloadExcel').on('click', function (e) {
                e.preventDefault();
                window.location.href = '/download_excel/QCInfo/'
            });

            $('#myModalReset').on('click', function (e) {
                e.preventDefault();
                if ($('#modal_title').text() === '更新') {
                    MyModelInit('更新', dataModelForm);
                } else {
                    MyModelInit('新增', {});
                }
            });

            pie_plot('QCInfo', fieldForPie.val(), fieldForPie.find("option:selected").text());

            fieldForPie.change(function () {
                pie_plot('QCInfo', fieldForPie.val(), fieldForPie.find("option:selected").text());
            });

            $("#modelForm input[type='text']").focus(function () {
                let key2 = $(this).attr('id');
                let values = $.ajax({
                    url: "{% url 'unique' %}", data: {model: "QCInfo", filed: key2},
                    dataType: 'json', contentType: "application/json",
                    method: "GET", async: false
                }).responseJSON.values;
                console.info("values:", values, "; key2:", key2);
                input_autocomplete(values, '#' + key2);
            });
        })

    </script>
{% endblock %}